<!--<p>活动</p>-->
<div class="animated fadeIn">
    <div class="row" style="padding-left: 20px">
        <div class="col-md-1.5" style="padding: 0;">
            <select name="name" id="select3" class="form-control" [(ngModel)]="keys" (change)="changesKey()">
                <option value="">全部</option>
                <option value="1">组织人昵称</option>
                <option value="2">活动地址</option>
            </select>
        </div>

        <div class="col-md-3" style="padding: 0;margin-left: 15px">
            <input *ngIf="keys == ''" type="text" class="form-control btn-radius">
            <input *ngIf="keys == 2" type="text" class="form-control btn-radius"
                   [(ngModel)]="address_detailed" placeholder="请输入活动地址">
            <input *ngIf="keys == 1" type="text" class="form-control btn-radius"
                   [(ngModel)]="org_nickname" placeholder="请输入组织人昵称">
        </div>

        <div class="col-md-1" style="padding: 0;margin-left: 15px">
            <select name="name" id="select4" class="form-control" [(ngModel)]="formater">
                <option value="">赛制</option>
                <option value="0">待定</option>
                <option value="1">5人制</option>
                <option value="2">6人制</option>
                <option value="3">7人制</option>
                <option value="4">8人制</option>
                <option value="5">9人制</option>
                <option value="6">10人制</option>
                <option value="7">11人制</option>
            </select>
        </div>

        <span class="text-line" style="padding: 0;margin-left: 15px">活动类型</span>
        <div class="col-md-2" style="padding: 0;margin-left: 15px">
            <select name="name" id="select1" class="form-control" [(ngModel)]="type">
                <option value="">活动类型</option>
                <option value="0">散踢</option>
                <option value="1">队内活动</option>
                <option value="2">球队比赛</option>
            </select>
        </div>

        <div class="col-md-1">
            <button class="btn btn-radius btn-primary" (click)="getData()">查询</button>
        </div>
    </div>


    <div class="table-responsive" style="margin-top: 20px">
        <table class="table table-center table-bordered table-hover" style="min-width: 0px">
            <thead class="table-inverse">
            <tr class="text-nowrap">
                <td>组织人昵称</td>
                <td>场地</td>
                <td>赛制</td>
                <!--<td>人数上限</td>-->
                <!--<td>人数下限</td>-->
                <td>添加时间</td>
                <td>费用(元)</td>
                <td>活动类型</td>
                <td>活动状态</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody class="tab-content">
            <tr *ngFor="let item of dataArr let i = index">
                <td>{{item['originator_id'].nickname}}</td>
                <td><span>{{item.address_province}}</span>
                    <span>{{item.city}}</span>
                    <span>{{item.area}}</span>
                    <span>{{item.address_detailed}}</span>
                </td>
                <td>
                    <span *ngIf="item.formater == 0">待定</span>
                    <span *ngIf="item.formater == 1">5人制</span>
                    <span *ngIf="item.formater == 2">6人制</span>
                    <span *ngIf="item.formater == 3">7人制</span>
                    <span *ngIf="item.formater == 4">8人制</span>
                    <span *ngIf="item.formater == 5">9人制</span>
                    <span *ngIf="item.formater == 6">10人制</span>
                    <span *ngIf="item.formater == 7">11人制</span>
                </td>
                <!--<td>{{item.upper_limit}}</td>-->
                <!--<td>{{item.lower_limit}}</td>-->
                <td>{{item.add_time}}</td>
                <td>{{item.price}}元</td>
                <td>
                    <span *ngIf="item.type == 0">散踢</span>
                    <span *ngIf="item.type == 1">队内活动</span>
                    <span *ngIf="item.type == 2">球队比赛</span>
                </td>
                <td>
                    <span *ngIf="item.activity_state == 0">已取消</span>
                    <span *ngIf="item.activity_state == 1">可参加</span>
                    <span *ngIf="item.activity_state == 2">已过期</span>
                </td>
                <td>
                    <a href="javascript:;" [routerLink]="['view', item.id]">查看</a>
                    <span class="removeBtn" (click)="smallModal.show();deleteitem(item.id)">删除</span>
                </td>
            </tr>
            </tbody>
        </table>
        <p *ngIf="isNodata" class="noneData">暂无数据</p>
        <!--分页组件-->

        <div style="float: right">
            <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10"
                        [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页"
                        (pageChanged)="pageChanged($event)"></pagination>
        </div>
    </div>
</div>
<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-primary modal-sm modal-danger" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center">
                <p style="margin: 0px">确定要删除该条活动？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">取消</button>
                <button type="button" class="btn btn-primary btn-danger"
                        (click)="smallModal.hide();definiteRequest();">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<div *ngIf="dangerModal" [config]="{ show: true }" (onHidden)="hideModal()" bsModal #autoShownModal="bs-modal"
     class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" [ngClass]="{'modal-danger': !issuccess, 'modal-success':issuccess}">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">提示</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center;">
                <p style="margin: 0px">{{modalText}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn " [ngClass]="{'btn-success':issuccess,'btn-danger':!issuccess}"
                        (click)="hideModal();">确定
                </button>
            </div>
        </div>
    </div>
</div>